<!--
	作者：747591335@qq.com
	时间：2017-04-25
	描述：1.首先引入基本的css和js文件
	      2.然后可以开始使用liger Grid
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
           .btn{
           	width: 90px;
           	height: 30px;
           	border: none;
           	outline: none;
           }
           .btn:active{
           	cursor: pointer;
           	transform: translateY(2px);
           }
		</style>
		<link rel="stylesheet" href="js/plugins/ligerUI/skins/Aqua/css/ligerui-all.css" type="text/css">
		<script src="js/plugins/ligerUI/jquery-1.9.0.min.js" type="text/javascript"></script>
	    <script src="js/plugins/ligerUI/js/ligerui.all.js"></script>

	 </head>
	<body>
		
		<div id="maingrid" ></div>
		<button class="btn" id="btn" onclick="showDialog()">点击显示弹窗</button>
		<button class="btn" id="btn" onclick="handle()">显示e</button>
		<script type="text/javascript">
			var griddata = [
			  {id:'01',name:'部门01',opt:'w'},
			  {id:'02',name:'部门01',opt:'q'},
			  {id:'03',name:'部门02',opt:'A'},
			  {id:'04',name:'部门04',opt:'B'},
			  {id:'05',name:'部门05',opt:'C'},
			  {id:'06',name:'部门06',opt:'D'},
			  {id:'07',name:'部门07',opt:'E'},
			  {id:'08',name:'部门08',opt:'F'},
			];
			var grid = $("#maingrid").ligerGrid({
				columns:[
				  {name:'id',display:'序号',width:100},
				  {name:'opt',display:'名称',width:100},
				  { 
				  	name:'opt',
				    display:'操作',
				    width:100,
				    
				  },
				  {
				  	name:'test',
				    display:'测试栏目',
				    width:100,
				  }
				],
				data:{Rows:griddata}
			});
			
			//显示弹窗
			function showDialog(){
			    $.ligerDialog.success("编辑成功.");
			}
			
		
			
		</script>
	</body>
</html>
